<template>
  <div>
    <table>
      <thead>欢迎光临_vue开发的收银系统_水果店</thead>
      <tr>
        <select @change="getIndex($event)">
          <option selected style='display: none'>请挑选水果</option>
          <option v-for="(item,index) in fruits" :key="index" :value="index">
            {{item.name}}：{{item.cost}}￥/斤，{{(item.sale)*10}}折
          </option>
        </select>
      </tr>
      <tr>
        请输入你要购买的斤数：<input type="text" v-model.number="weight">
        <button @click.prevent="buy(i)">结算</button>
      </tr>
      <tr v-if="total.length!==0">结账单：总价{{total[0]}}元，折后价{{total[1]}}元，省了{{total[2]}}元</tr>
    </table>
  </div>
</template>

<script>
export default {
  data(){
    return{
      fruits:[
        {name:'苹果',cost:10,sale:0.8},
        {name:'草莓',cost:20,sale:0.75},
        {name:'橙子',cost:12,sale:0.9},
        {name:'葡萄',cost:16,sale:0.85},
        {name:'石榴',cost:18,sale:0.9},
      ],
      weight:0,
      i:'',
      total:[],
      before:0,
      after:0,
    }
  },
  methods:{
    getIndex(e){
     this.i=e.target.value
    },
    buy(i){
      this.total=[],
      this.before=this.fruits[i].cost*this.weight
      this.after=this.before*this.fruits[i].sale.toFixed(1),

      this.total.push(this.before,this.after,(this.before-this.after).toFixed(1))
    }
  }
}
</script>

<style>
  div{
    margin: 20px auto;
    width: 600px;
  }
  table{
    width: 100%;
    text-align: center;
  }

</style>